<template>
  <div class="mmgmt">
    <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
      <el-tab-pane>
        <template #label>
          <span class="custom-tabs-label">
            <el-icon>
              <calendar />
            </el-icon>
            <span>素材管理</span>
          </span>
        </template>
        <!-- 素材管理选择框 -->
        <div class="top-content">

          <el-form :inline="true" class="demo-form-inline">

            <el-form-item label="素材名称">
              <el-input placeholder="请输入" v-model="filterCondition.name">
              </el-input>
            </el-form-item>


            <el-form-item label="任务状态" label-width="100px">
              <el-select v-model="filterCondition.status" placeholder="选择状态">
                <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>


            <el-date-picker v-model="filterCondition.time" type="daterange" range-separator="至" start-placeholder="开始日期"
              end-placeholder="结束日期" class="ml-16">
            </el-date-picker>

          </el-form>

          <el-button class="ml-96" color="#1074FD" size="large" @click="filterMaterial">查询</el-button>
          <el-button class="" color="#E8E8E8" size="large">清空条件</el-button>



        </div>
        <div class="bot-content">
          123
        </div>
      </el-tab-pane>
      <el-tab-pane label="Config" name="second">Config</el-tab-pane>
      <el-tab-pane label="Role" name="third">Role</el-tab-pane>
      <el-tab-pane label="Task" name="fourth">Task</el-tab-pane>
    </el-tabs>
  </div>
</template>

<script scoped>
export default {
  data() {
    return {
      activeName: "first",
      filterCondition: {
        name: "",
        status: "",
        time: "",
      },

    };
  },

}
</script>



<style>
.mmgmt {
  padding: 19px 19px;
}

.el-tabs__nav-scroll {
  padding: 10px 20px;
  background-color: #fff;
  border-radius: 8px;
}

.el-tabs__nav-wrap::after {
  content: none;
}

.el-tabs__content {
  height: 900vh;
  background-color: #F0F0F0;
}

.top-content {
  height: 111px;
  background-color: red;
  border-radius: 8px;
  display: flex;
  flex-direction: row;

}

.bot-content {
  margin-top: 19px;
  height: 438vh;
  background-color: #fff;
  border-radius: 8px;
}
</style>